<script lang="ts" setup>
import type { VbenFormProps } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';

import { ref } from 'vue';

import { Page } from '@vben/common-ui';

import { Button, Tag } from 'ant-design-vue';
import dayjs from 'dayjs';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { queryJobLog } from '#/api';

const tTime = (time) => {
  if (time) {
    return dayjs(time).format('YYYY-MM-DD HH:mm:ss');
  }
  return '';
};

interface RowType {
  category: string;
  color: string;
  id: string;
  price: string;
  productName: string;
  releaseDate: string;
}

const formOptions: VbenFormProps = {
  // 默认展开
  schema: [
    {
      component: 'Input',
      fieldName: 'searchContent',
      componentProps: {
        placeholder: '请输入任务名称模糊查询',
      },
      label: '任务名称',
    },
  ],
  // 控制表单是否显示折叠按钮
  showCollapseButton: false,
  submitButtonOptions: {
    content: '查询',
  },
  // 是否在字段值改变时提交表单
  submitOnChange: false,
  // 按下回车时是否提交表单
  submitOnEnter: false,
};
const pageTotal = ref(0);
const gridOptions: VxeGridProps<RowType> = {
  checkboxConfig: {
    highlight: true,
    labelField: 'name',
  },
  columns: [
    {
      title: '任务ID',
      field: 'task_id',
      // width: 80,
    },
    {
      title: '任务名称',
      field: 'task_name',
    },
    {
      title: '创建时间',
      field: 'create_time',
      slots: { default: 'create_time' },
      // width: 150,
    },
    {
      title: '执行状态',
      field: 'status',
      slots: { default: 'status' },
      // width: 100,
    },
    {
      title: '错误信息',
      field: 'error_message',
      // width: 200,
    },
    {
      title: '执行结果',
      field: 'result',
      // width: 200,
    },
  ],

  pagerConfig: {
    pageSize: 10,
  },
  keepSource: true,
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        const data = await queryJobLog({
          page: page.currentPage,
          pageSize: page.pageSize,
          ...formValues,
        });
        pageTotal.value = data.total;
        return data;
      },
    },
  },
  toolbarConfig: {
    // 是否显示搜索表单控制按钮
    // @ts-ignore 正式环境时有完整的类型声明
    search: true,
    custom: true,
    export: true,
    // import: true,
    refresh: true,
    zoom: true,
  },
};

const [Grid, gridApi] = useVbenVxeGrid({ formOptions, gridOptions });
</script>

<template>
  <Page>
    <div class="vp-raw w-full">
      <Grid>
        <template #create_time="{ row }">
          <Button type="link">{{ tTime(row.create_time) }}</Button>
        </template>
        <template #status="{ row }">
          <Tag color="green" v-if="row.status === 1">成功</Tag>
          <Tag color="red" v-if="row.status === 0">失败</Tag>
          <Tag color="default" v-if="row.status === 2">未执行</Tag>
        </template>
      </Grid>
    </div>
    <Drawer />
  </Page>
</template>
